<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="../js/jquery-3.1.1.js"></script>
		<!--<![endif]-->

		<style type="text/css">
			div {
				border: 1px solid black;
				margin-top: 8px;
			}
			
			.intro {
				font-size: 150%;
				color: red;
			}
		</style>
	</head>

	<body>
<h1> jQuery.extend 用例</h1>
		<div id="log"></div>
<h1> jQuery.merge 用例</h1>
		<span id="log2"></span>
		<script>
			$(function() {
				var object1 = {
					apple: 0,
					banana: {
						weight: 52,
						price: 100
					},
					cherry: 97
				};
				var object2 = {
					banana: {
						price: 200
					},
					durian: 100
				};
				var arr = $.merge([0, 1, 2], [2, 3, 4]);
				/* object2 合并到 object1 中 */
				$.extend(object1, object2);

				var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
					var arr = [];
					$.each(obj, function(key, val) {
						var next = key + ": ";
						next += $.isPlainObject(val) ? printObj(val) : val;
						arr.push(next);
					});
					return "{ " + arr.join(", ") + " }";
				};
				$("#log").append(printObj(object1));
				$("#log2").text(arr.join(", "));

				var arr = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];
				$("#di3 div").text(arr.join(", "));
				arr = jQuery.grep(arr, function(n, i) {
					return(n !== 5 && i > 4);
				});
				$("#di3 p").text(arr.join(", "));
				arr = jQuery.grep(arr, function(a) {
					return a !== 9;
				});
				$("#di3 span").text(arr.join(", "));
			});

			function funmakeArray() {
				var elems = di1.getElementsByTagName("div"); // 返回一个节点列表
				var arr = jQuery.makeArray(elems);
				arr.reverse(); //对列表的元素使用一个数组方法
				$(arr).appendTo($("#di2"));
			}
			
	function funtoArray() {
		x=$("#di1 div").toArray()
		for (i=0;i<x.length;i++)
		{
			alert(x[i].innerHTML);
		}
	}
		</script>
	
	
		<div id="di1">
				<button onclick="funmakeArray()">funmakeArray</button>
					<button onclick="funtoArray()">funtoArray</button>
<h1> jQuery.makeArray 用例</h1>
			<div>First</div>
			<div>Second</div>
			<div>Third</div>
			<div>Fourth</div>

		</div>
	<div id="di2"></div>
		<div id="di3">
<h1> jQuery.grep 用例</h1>
			<div></div>
			<p></p>
			<span></span>

		</div>
	</body>

</html>